<template>
  <div class="canvars" ref="myRef"></div>
</template>
 
<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import  { ColorList }from "@/api/common"

const myRef = ref(null); // 获取dom实例

const props = defineProps({ //获取父组件传过来的数据
  dataInfo: Array,
  default: () => [],
});
const xAxisData = ref([]);//横向数据
const yAxisData = ref([]);//竖向数据
watch(
  () => props.dataInfo,
  (new_value) => {
    xAxisData.value = [];
    yAxisData.value = [];
    if (new_value) {

      let name_list = []
      new_value.forEach((item)=> {
        xAxisData.value.push(item.envName)
        let totalSuccess = item.totalSuccess
        Object.keys(totalSuccess).forEach((key,index) => {
          name_list.push(key) //拿到所有列名
        })
      })
      name_list = [...new Set(name_list)] //去重

      let name_item_list = [] //存放所有列名对应的数据
      new_value.forEach((item)=> {
        let totalSuccess = item.totalSuccess
        let list = []
        name_list.forEach(val =>{
          list.push(totalSuccess[val] || 0)
        })
        name_item_list.push(list)
      })
      
      name_list.forEach((item,index) => { 
        let obj = {
          name: item,
          data:  name_item_list.map(subArray => subArray[index]),
          type: "bar",
          itemStyle: {
            color: ColorList[index],
          },
        }
        yAxisData.value.push(obj)
      })
      
      renderChart(); // 生命周期挂载函数渲染图表
    }
  }
);

onMounted(() => {
  // renderChart(); // 生命周期挂载函数渲染图表
});
const renderChart = () => {
  const myChart = echarts.init(myRef.value);
  myChart.setOption({
    title: {
      text: "环境通过率对比",
      left:"20px"
    },
    xAxis: {
      type: "category",
      data: xAxisData.value,
    },
    yAxis: {
     
    },
    legend: {
      show: true,
      bottom: "0",
    },
    series: yAxisData.value,
    // series: [
    //   {
    //     name: "网络",
    //     data: [20, 170, 100, 50, 90, 140, 170],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[1],
    //     },
    //   },
    //   {
    //     name: "存储",
    //     data: [30, 140, 100, 120, 110, 100, 130],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[2],
    //     },
    //   },
    //   {
    //     name: "安全",
    //     data: [40, 140, 100, 120, 110, 100, 130],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[3],
    //     },
    //   },
    //   {
    //     name: "其他1",
    //     data: [50, 0, 0, 0, 0, 0, 0],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[4],
    //     },
    //   },
    //   {
    //     name: "其他2",
    //     data: [60, 10, 0, 0, 0, 0, 20],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[5],
    //     },
    //   },
    //   {
    //     name: "其他3",
    //     data: [70, 0, 30, 0, 20, 0, 0],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[6],
    //     },
    //   },
    //   {
    //     name: "其他4",
    //     data: [80, 100, 100, 100, 100, 100, 100],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[7],
    //     },
    //   },
    //   {
    //     name: "其他5",
    //     data: [90, 20, 30, 40, 50, 60, 70],
    //     type: "bar",
    //     itemStyle: {
    //       color: ColorList[8],
    //     },
    //   },
    // ],
  });
};
</script>
 
<style scoped>
.canvars {
  width: 100%;
  height: 100%;
  min-height: 400px;
}
</style>